<template>
    <div class="edit-popup">
        <el-tabs type="border-card" v-model="activeTab">
            <el-tab-pane label="建立单人纪念馆" name="1">
                <el-form ref="formRef" :model="formData" label-width="120px" :rules="formRules" style="width: 600px;">
                    <el-form-item label="逝者姓名" prop="name">
                        <el-input v-model="formData.name" clearable placeholder="请输入逝者姓名" />
                    </el-form-item>

                    <el-form-item label="逝者出生日期" prop="birth_date">
                        <el-date-picker v-model="formData.birth_date" type="date" placeholder="请选择逝者出生日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                        <!-- <el-input v-model="formData.birth_date" clearable placeholder="请输入逝者出生日期" /> -->
                    </el-form-item>
                    <el-form-item label="逝者去世日期" prop="death_date">
                        <el-date-picker v-model="formData.death_date" type="date" placeholder="请选择逝者去世日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                        <!-- <el-input v-model="formData.death_date" clearable placeholder="请输入逝者去世日期" /> -->
                    </el-form-item>
                    <el-form-item label="逝者照片" prop="avatar">
                        <material-picker v-model="formData.avatar" :limit="1" />
                    </el-form-item>

                    <el-form-item label="情感关系" prop="relationship">
                        <el-select v-model="formData.relationship" clearable placeholder="请选择情感关系">
                            <el-option v-for="item in relationshipList" :key="item.id" :label="item.title" :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="宗教" prop="religion">
                        <el-select v-model="formData.religion" clearable placeholder="请选择宗教">
                            <el-option v-for="item in religionList" :key="item.value" :label="item.name" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="国籍" prop="nationality">
                        <el-select v-model="formData.nationality" clearable placeholder="请选择国籍">
                            <el-option v-for="item in nationalityList" :key="item.value" :label="item.name" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="祖籍" prop="ancestral">
                        <el-select v-model="formData.ancestral" clearable placeholder="请选择祖籍">
                            <el-option v-for="item in ancestralList" :key="item.value" :label="item.name" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="职业" prop="career">
                        <el-select v-model="formData.career" clearable placeholder="请选择职业">
                            <el-option v-for="item in careerList" :key="item.value" :label="item.name" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-divider />
                </el-form>
                <el-divider />
                <el-form ref="formRef" :model="formData3" label-width="120px" :rules="formRules" style="width: 800px;">
                    <el-form-item label="墓碑别名" prop="alias">
                        <el-input v-model="formData3.alias" clearable placeholder="请输入墓碑别名" />
                    </el-form-item>
                    <el-form-item label="墓碑祭词" prop="sacrificial_word">
                        <el-input v-model="formData3.sacrificial_word" clearable placeholder="请输入墓碑祭词" />
                    </el-form-item>
                    <el-form-item label="简介" prop="content">
                        <el-input type="textarea" :rows="4" v-model="formData3.content" clearable placeholder="请输入简介" />
                    </el-form-item>
                    <el-form-item label="署名" prop="sign_name">
                        <el-input v-model="formData3.sign_name" clearable placeholder="请输入署名" />
                    </el-form-item>
                </el-form>
                <el-divider />
                <div style="display: flex;justify-content: center;">
                    <el-button type="primary" @click="handleSubmit">保存</el-button>
                </div>
            </el-tab-pane>
            <el-tab-pane label="建立双人纪念馆" name="2">
                <div style="width: 1200px;">
                    <div style="display: flex;align-items: flex-start;gap: 120px;">
                        <el-form ref="formRef" :model="formData" label-width="120px" :rules="formRules" style="width: 500px;">
                            <el-form-item label="逝者姓名" prop="name">
                                <el-input v-model="formData.name" clearable placeholder="请输入逝者姓名" />
                            </el-form-item>

                            <el-form-item label="逝者出生日期" prop="birth_date">
                                <el-date-picker v-model="formData.birth_date" type="date" placeholder="请选择逝者出生日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                                <!-- <el-input v-model="formData.birth_date" clearable placeholder="请输入逝者出生日期" /> -->
                            </el-form-item>
                            <el-form-item label="逝者去世日期" prop="death_date">
                                <el-date-picker v-model="formData.death_date" type="date" placeholder="请选择逝者去世日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                                <!-- <el-input v-model="formData.death_date" clearable placeholder="请输入逝者去世日期" /> -->
                            </el-form-item>
                            <el-form-item label="逝者照片" prop="avatar">
                                <material-picker v-model="formData.avatar" :limit="1" />
                            </el-form-item>

                            <el-form-item label="情感关系" prop="relationship">
                                <el-select v-model="formData.relationship" clearable placeholder="请选择情感关系">
                                    <el-option v-for="item in relationshipList" :key="item.id" :label="item.title" :value="item.id" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="宗教" prop="religion">
                                <el-select v-model="formData.religion" clearable placeholder="请选择宗教">
                                    <el-option v-for="item in religionList" :key="item.value" :label="item.name" :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="国籍" prop="nationality">
                                <el-select v-model="formData.nationality" clearable placeholder="请选择国籍">
                                    <el-option v-for="item in nationalityList" :key="item.value" :label="item.name" :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="祖籍" prop="ancestral">
                                <el-select v-model="formData.ancestral" clearable placeholder="请选择祖籍">
                                    <el-option v-for="item in ancestralList" :key="item.value" :label="item.name" :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="职业" prop="career">
                                <el-select v-model="formData.career" clearable placeholder="请选择职业">
                                    <el-option v-for="item in careerList" :key="item.value" :label="item.name" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <!-- <el-divider direction="vertical" style="height: 100%;"/> -->
                        <el-form ref="formRef" :model="formData2" label-width="120px" :rules="formRules" style="width: 500px;">
                            <el-form-item label="逝者姓名" prop="name2">
                                <el-input v-model="formData2.name2" clearable placeholder="请输入逝者姓名" />
                            </el-form-item>

                            <el-form-item label="逝者出生日期" prop="birth_date2">
                                <el-date-picker v-model="formData2.birth_date2" type="date" placeholder="请选择逝者出生日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                                <!-- <el-input v-model="formData.birth_date" clearable placeholder="请输入逝者出生日期" /> -->
                            </el-form-item>
                            <el-form-item label="逝者去世日期" prop="death_date2">
                                <el-date-picker v-model="formData2.death_date2" type="date" placeholder="请选择逝者去世日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                                <!-- <el-input v-model="formData.death_date" clearable placeholder="请输入逝者去世日期" /> -->
                            </el-form-item>
                            <el-form-item label="逝者照片" prop="avatar2">
                                <material-picker v-model="formData2.avatar2" :limit="1" />
                            </el-form-item>

                            <el-form-item label="情感关系" prop="relationship2">
                                <el-select v-model="formData2.relationship2" clearable placeholder="请选择情感关系">
                                    <el-option v-for="item in relationshipList" :key="item.id" :label="item.title" :value="item.id" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="宗教" prop="religion2">
                                <el-select v-model="formData2.religion2" clearable placeholder="请选择宗教">
                                    <el-option v-for="item in religionList" :key="item.value" :label="item.name" :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="国籍" prop="nationality2">
                                <el-select v-model="formData2.nationality2" clearable placeholder="请选择国籍">
                                    <el-option v-for="item in nationalityList" :key="item.value" :label="item.name" :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="祖籍" prop="ancestral2">
                                <el-select v-model="formData2.ancestral2" clearable placeholder="请选择祖籍">
                                    <el-option v-for="item in ancestralList" :key="item.value" :label="item.name" :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="职业" prop="career2">
                                <el-select v-model="formData2.career2" clearable placeholder="请选择职业">
                                    <el-option v-for="item in careerList" :key="item.value" :label="item.name" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-form>
                        
                    </div>
                    <el-divider />
                    <el-form ref="formRef" :model="formData3" label-width="120px" :rules="formRules" style="width: 800px;">
                        <el-form-item label="双人头像" prop="avatar_double" v-if="activeTab == '2'">
                            <material-picker v-model="formData3.avatar_double" :limit="1" />
                        </el-form-item>
                        <el-form-item label="墓碑别名" prop="alias">
                            <el-input v-model="formData3.alias" clearable placeholder="请输入墓碑别名" />
                        </el-form-item>
                        <el-form-item label="墓碑祭词" prop="sacrificial_word">
                            <el-input v-model="formData3.sacrificial_word" clearable placeholder="请输入墓碑祭词" />
                        </el-form-item>
                        <el-form-item label="简介" prop="content">
                            <el-input type="textarea" :rows="4" v-model="formData3.content" clearable placeholder="请输入简介" />
                        </el-form-item>
                        <el-form-item label="署名" prop="sign_name">
                            <el-input v-model="formData3.sign_name" clearable placeholder="请输入署名" />
                        </el-form-item>
                    </el-form>
                    <el-divider />
                    <div style="display: flex;justify-content: center;">
                        <el-button type="primary" @click="handleSubmit">保存</el-button>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
        
    </div>
</template>

<script lang="ts" setup name="hotelBasicEdit">
import type { FormInstance } from 'element-plus'
import { apiGraveyardAdd, apiGraveyardEdit, apiGraveyardDetail } from '@/api/graveyardManage/list';
import { apiRelationLists } from '@/api/graveyardManage/emotionalRelationship'
import { dictDataLists, dictTypeLists } from '@/api/setting/dict';
import { timeFormat } from '@/utils/util'
import type { PropType } from 'vue'
import { reactive, ref, shallowRef, computed, nextTick, onMounted, toRaw, inject } from 'vue'
import { useRoute, useRouter } from 'vue-router'

defineProps({
    dictData: {
        type: Object as PropType<Record<string, any[]>>,
        default: () => ({})
    }
})
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const mode = ref('add')
const route = useRoute()
const router = useRouter()

// 表单数据
const formData = reactive<{
    name: string,
    birth_date: string,
    death_date: string,
    avatar: string,
    relationship: string,
    religion: string,
    nationality: string,
    ancestral: string,
    career: string,
}>({
    name: '',
    birth_date: '',
    death_date: '',
    avatar: '',
    relationship: '',
    religion: '',
    nationality: '',
    ancestral: '',
    career: '',
})
const formData2 = reactive<{
    name2: string,
    birth_date2: string,
    death_date2: string,
    avatar2: string,
    relationship2: string,
    religion2: string,
    nationality2: string,
    ancestral2: string,
    career2: string,
}>({
    name2: '',
    birth_date2: '',
    death_date2: '',
    avatar2: '',
    relationship2: '',
    religion2: '',
    nationality2: '',
    ancestral2: '',
    career2: '',
})

const formData3 = reactive<{
    alias?: string,
    avatar_double?: string,
    sacrificial_word: string,
    content: string,
    sign_name: string
}>({
    alias: '',
    avatar_double: '',
    sacrificial_word: '',
    content: '',
    sign_name: ''
})
// 情感关系列表
const relationshipList = ref<any[]>([])
// 宗教列表
const religionList = ref<any[]>([])
// 祖籍列表
const ancestralList = ref<any[]>([])
// 国籍列表
const nationalityList = ref<any[]>([])
// 职业列表
const careerList = ref<any[]>([])
// 当前选中的tab
const activeTab = ref('1')
// 表单验证
const formRules = reactive<any>({
    // name: [{
    //     required: true,
    //     message: '请输入逝者姓名',
    //     trigger: ['blur']
    // }],
})


// 获取详情
const setFormData = async (data: Record<any, any>) => {
    if(data.is_double == 1) {
        activeTab.value = '2'
    }
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }
    for (const key in formData2) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData2[key] = data[key]
        }
    }
    for (const key in formData3) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData3[key] = data[key]
        }
    }
    
}

const getDetail = async () => {
    const data = await apiGraveyardDetail({
        id: route.query.id
    })
    setFormData(data)
}


// 提交按钮
const handleSubmit = async () => {
    await formRef.value?.validate()
    let data = { ...formData, ...formData3 }
    if(activeTab.value == '2') {
        data = {...formData, ...formData2, ...formData3}
    }
    console.log('data==========================',toRaw(data))
    let params: any = {
        type: activeTab.value, 
        user_id: 1, 
        is_double: activeTab.value == '2' ? 1 : 0
    }
    if(route.query.id){
        params.id = route.query.id
    }
    mode.value == 'edit' 
        ? await apiGraveyardEdit({...data, ...params}) 
        : await apiGraveyardAdd({...data, ...params})
    // 刷新列表
    router.back()
}

//打开弹窗
const open = (type = 'add') => {
    mode.value = type
}

// 关闭回调
const handleClose = () => {
    emit('close')
}

const getReligionList = async () => {
    const data = await dictTypeLists({type: 'dict_religion'})
    const religionData = await dictDataLists({type_id: data.lists[0].id})
    religionList.value = religionData.lists
}
const getAncestralList = async () => {
    const data = await dictTypeLists({type: 'dict_ancestral'})
    const ancestralData = await dictDataLists({type_id: data.lists[0].id})
    ancestralList.value = ancestralData.lists
}
const getCareerList = async () => {
    const data = await dictTypeLists({type: 'dict_career'})
    const careerData = await dictDataLists({type_id: data.lists[0].id})
    careerList.value = careerData.lists
}
const getNationalityList = async () => {
    const data = await dictTypeLists({type: 'dict_nationality'})
    const nationalityData = await dictDataLists({type_id: data.lists[0].id})
    nationalityList.value = nationalityData.lists
}
const getRelationshipList = async () => {
    const data = await apiRelationLists({page_no: 1, page_size: 9999})
    relationshipList.value = data.lists
}
onMounted(() => {
    getReligionList()
    getAncestralList()
    getCareerList()
    getNationalityList()
    getRelationshipList()
    getDetail()

    if(route.query.id){
        mode.value = 'edit'
    }else{
        mode.value = 'add'
    }
})
// defineExpose({
//     open,
//     setFormData,
//     getDetail
// })
</script>
